<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<LeftMenuComponent activeIndex="4" />
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							展商证件申请
						</div>
					</div>
					<div class="login-box">
						<div class="certificate-box">
							<div class="notice-icon-box">
								<img src="../assets/notice-icon.png" alt="">
							</div>
							<div class="notice-detail-box">
								<span>
									IC China 2024展会期间(包括布展及撤展期间)，参展商必须佩戴参展商证，并不得转借他人使用。请将展台工作人员信息填入下表并提交。<br />
									参展商证领取:请参展负责人持本人<font class="id-card-font">持展位确认书、名片或付款水单</font>
									于2024年11月16～17日到北京国家会议中心展商报到处领取。<br />
									本页面将于11月8日关闭，请确保在此截止日期前完成信息提交。
								</span>
							</div>
							<div class="notice-help-box">
								<span>
									已提交成功的胸卡信息 <font class="badge-font">{{ message_process_count_count }}</font>
									个，您还可以提交 <font class="badge-font">{{ surplus_number }}
									</font> 个
								</span>
							</div>
						</div>
						<div class="hr-box"></div>
						<div class="table-box">
							<el-table :data="dataList" border style="width: 100%;text-align: center;">
								<el-table-column prop="name" label="姓名" width="80">
								</el-table-column>
								<el-table-column prop="phone" label="手机号" width="200">
								</el-table-column>
								<el-table-column prop="e_mail" label="邮箱" width="250">
								</el-table-column>
								<el-table-column prop="code" label="证件号" width="250">
								</el-table-column>
								<el-table-column prop="status" label="删除">
									<template v-slot="scope">
										<div class="status-delete last-tr" @click="removeExhibitors(scope.row)">
											<img src="../assets/delete.png" alt="">
											<div>
												删除
											</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="hr-box"></div>
						<div class="user-info-box">
							<div class="user-info-left-box">
								<div class="user-info-avatar-box">
									<img src="../assets/avatar.png" alt="">
								</div>
								<div class="user-info-help-box">
									<span class="user-info-font">请输入真实信息</span><br />
									<span class="user-info-attendee">参会人</span>
								</div>
							</div>
							<div class="user-info-right-box">
								<el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-width="100px"
									class="demo-ruleForm">
									<el-form-item label="姓名:" prop="name" required>
										<el-input v-model="ruleForm.name"></el-input>
									</el-form-item>
									<el-form-item label="证件类型:" prop="id_code_type" required>
										<el-radio v-model="ruleForm.id_code_type" label="1">身份证</el-radio>
										<el-radio v-model="ruleForm.id_code_type" label="2">护照</el-radio>
										<el-radio v-model="ruleForm.id_code_type" label="3">港澳台通行证</el-radio>
									</el-form-item>
									<el-form-item label="证件号码:" prop="id_code" required>
										<el-input v-model="ruleForm.id_code"></el-input>
									</el-form-item>
									<el-form-item label="手机号:" prop="phone" required>
										<el-input v-model="ruleForm.phone"></el-input>
									</el-form-item>
									<el-form-item label="邮箱:" prop="email" required>
										<el-input v-model="ruleForm.email"></el-input>
									</el-form-item>
									<el-form-item class="form-btn-box">
										<el-button class="save-btn" type="primary"
											@click="submitForm('ruleForm')">提交</el-button>
										<el-button class="reset-btn" @click="resetForm('ruleForm')">重置</el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		create,
		show,
		remove
	} from "/src/api/certificate.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import LeftMenuComponent from './LeftMenu.vue';
	export default {
		name: 'ExhibitorsDownloadComponent',
		components: {
			HeaderComponent,
			FooterComponent,
			LeftMenuComponent
		},
		props: {
			msg: String
		},
		data() {
			var validateName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入姓名'));
				} else {
					callback();
				}
			};
			var validateIdCodeType = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请选择证件类型'));
				} else {
					callback();
				}
			};
			var validateIdCode = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入证件号码'));
				} else {
					if (this.ruleForm.id_code_type == '1') {
						const regIdCard =
							/^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;

						if (!regIdCard.test(value)) {
							return callback(new Error('请输入正确的证件号格式'));
						}
					} else if (this.ruleForm.id_code_type == '2') {
						const regIdCard1 = /^[a-zA-Z0-9]{5,18}$/;
						if (!regIdCard1.test(value)) {
							return callback(new Error('请输入正确的证件号格式'));
						}
					}

					callback();
				}
			};
			var validatePhone = (rule, value, callback) => {
				const phoneReg = /^1[3-9]\d{9}$/;
				const telReg = /^(\d{3,4}-)?\d{7,8}$/;
				if (!value) {
					return callback(new Error('请输入手机号'));
				} else if (!phoneReg.test(value)) {
					if (!telReg.test(value)) {
						return callback(new Error('请输入正确的手机号或座机格式'));
					} else {
						callback();
					}
				} else {
					callback();
				}
			};
			var validateEmail = (rule, value, callback) => {
				const emailReg = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;
				if (!value) {
					return callback(new Error('请输入邮箱'));
				} else if (!emailReg.test(value)) {
					return callback(new Error('请输入正确的邮箱格式'));
				} else {
					callback();
				}
			};
			return {
				message_process_count_count: 0,
				surplus_number: 0,
				dataList: [],
				tableData: [{
					id: 1,
					name: '杨礼阳',
					phone: '18401581011',
					email: '12346@vip.com',
					id_code: '4152684225841111'
				}, {
					id: 2,
					name: '杨礼阳',
					phone: '18401581011',
					email: '12346@vip.com',
					id_code: '4152684225841111'
				}, {
					id: 3,
					name: '杨礼阳',
					phone: '18401581011',
					email: '12346@vip.com',
					id_code: '4152684225841111'
				}],
				ruleForm: {
					name: '',
					id_code: '',
					id_code_type: '1',
					phone: '',
					email: ''
				},
				rules: {
					name: [{
						validator: validateName,
						trigger: 'blur'
					}],
					id_code_type: [{
						validator: validateIdCodeType,
						trigger: 'blur'
					}],
					id_code: [{
						validator: validateIdCode,
						trigger: 'blur'
					}],
					phone: [{
						validator: validatePhone,
						trigger: 'blur'
					}],
					email: [{
						validator: validateEmail,
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {
			removeExhibitors(row) {
				console.log(row)
				this.$confirm('确定删除吗, 是否继续?', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					remove(row.id).then(data => {
						if (data.data.code == 200) {
							this.$message({
								message: '删除成功！',
								type: 'success'
							});
							this.$router.go(0);
						} else {
							this.$message({
								message: data.data.message,
								type: 'error'
							});
						}
					})
				}).catch(() => {});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						create(this.ruleForm).then(data => {
							if (data.data.code == 200) {
								this.$message({
									message: '添加成功！',
									type: 'success'
								});
								this.$router.go(0);
							} else {
								this.$message({
									message: data.data.message,
									type: 'error'
								});
							}
						}).catch((error) => {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			show() {
				show().then(data => {
					let rows = data.data.data;
					this.message_process_count_count = rows.auxiliary.message_process_count_count;
					this.surplus_number = rows.auxiliary.surplus_number;
					this.dataList = rows.data;
				})
			}
		},
		mounted() {
			this.show();
		}
	}
</script>

<style scoped>
	.reset-btn {
		border: 1px solid #2B64A8;
		color: #2B64A8;
	}

	.save-btn {
		background: #2B64A8;
	}

	:deep(.el-button) {
		width: 113px;
		height: 35px;
		border-radius: 4px;
		font-weight: bold;
	}

	:deep(.el-radio) {
		margin-right: 5px;
	}

	.user-info-box {
		overflow: hidden;
	}

	.user-info-right-box {
		width: 340px;
		float: left;
	}

	.user-info-box {
		margin-top: 30px;
		border-radius: 4px;
		border: 1px solid #DDDFE4;
		padding: 20px;
	}

	.user-info-attendee {
		line-height: 3;
		font-size: 20px;
		font-weight: 600;
	}

	.user-info-font {
		color: #999999;
	}

	.user-info-help-box {
		margin-top: 40px;
		font-weight: 400;
		font-size: 16px;
		line-height: 20px;
		text-align: center;
		font-style: normal;
	}

	.user-info-avatar-box img {
		width: 100%;
		height: 100%;
	}

	.user-info-avatar-box {
		width: 90px;
		height: 90px;
		margin: auto;
		margin-top: 50px;
	}

	.user-info-left-box {
		width: 240px;
		height: 300px;
		background: #EEF4FE;
		text-align: center;
		overflow: hidden;
		float: left;
	}

	.status-delete div {
		border-bottom: 1px #448df1 solid;
		width: 30px;
		float: left;
		text-align: center;
		margin-left: 3px;
	}

	.status-delete img {
		width: 19px;
		float: left;
		margin-top: 4px;
	}

	.status-delete {
		color: #448EF1;
	}

	:deep(.is-leaf.el-table__cell) {
		background: #DDDFE4;
		color: #000;
	}

	.hr-box {
		width: 870px;
		height: 1px;
		background-color: #DADADA;
		margin-top: 30px;
	}

	.certificate-box {
		overflow: hidden;
	}

	:deep(.el-table__cell) {
		text-align: center;
	}

	.table-box {
		margin-top: 30px;
	}

	.table-box div {
		text-align: center;
	}

	.el-table__header tr th {
		font-weight: bold;
		font-size: 15px;
		color: #333333;
		background-color: #F3F4F7 !important;
	}

	.badge-font {
		color: #FF8757;
	}

	.id-card-font {
		color: #EB3C2C;
		font-weight: 600;
	}

	.notice-help-box {
		width: 590px;
		height: 50px;
		background: #FDF3EF;
		border-radius: 40px;
		overflow: hidden;
		margin-left: 20px;
		float: left;
		line-height: 3.5;
		margin-top: 10px;
		font-weight: bold;
		font-size: 15px;
		color: #333333;
		letter-spacing: 8px;
	}

	.notice-detail-box {
		font-weight: 400;
		font-size: 16px;
		color: #666666;
		line-height: 36px;
		text-align: justify;
		font-style: normal;
		float: left;
		width: 590px;
		margin-left: 18px;
	}

	.notice-icon-box {
		width: 260px;
		height: 240px;
		float: left;
	}

	.notice-icon-box img {
		width: 100%;
		height: 100%;
	}

	.login-box {
		width: 870px;
		margin: 20px auto;
		border-radius: 3px;
	}

	.right-vertical-title-box {
		width: 200px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		overflow: hidden;
		margin-bottom: 30px;
		box-shadow: 0px 10px 20px 0px rgba(43, 100, 168, 0.1);
	}

	.content-box {
		overflow: hidden;
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.content-left-font {
		font-size: 18px;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>